<template>
	<div class="inputBox">
		<div class="bui-box">
			<div class="avatar-wrap avatar-wrap-center">
				<img src="https://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990~120x256.image">
			</div>

			<div class="input-wrap" :class="{'focus':isFocus}">
				<div class="c-textarea">
					<textarea v-model="comment" placeholder="写下您的评论..." @focus="inputFocus" @blur="inputBlur"></textarea>
				</div>
				<div class="c-action">
					<div class="c-submit" @mousedown="preventInputBlur($event)" @click="submit">评论</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { publishComment } from "@/api/content/detail"

export default{
	props:{
		articleId:{
			type:[Number,String],
			default:''
		},
		parentId:{
			type:[Number,String],
			default:''
		}
	},
	data(){
		return{
			isFocus:false,
			comment:''
		}
	},
	mounted(){

	},
	methods:{
		//文本框聚焦
		inputFocus(){
			this.isFocus = true;
		},
		//文本框失焦
		inputBlur(){
			this.isFocus = false;
		},
		validateComment(){

			if(String(this.comment).trim().length == 0){
				alert("请输入评论内容")
				return false;
			}

			if(String(this.comment).trim().length < 3){
				alert("最少输入3个字")
				return false;
			}

			return true;
		},
		//阻止提交时input失焦事件
		preventInputBlur(ev){
			ev.preventDefault()
		},
		//发表评论
		submit(){
			if(!this.validateComment()) return;

			publishComment(this.articleId,this.parentId,this.comment).then((res)=>{
				console.log("------发表评论返回信息----")
				console.log(res)
				if(res.data.code == 200){
					//发布成功
					this.comment = '';
					this.$emit('success')
				}
			})

		}
	}
}

</script>


<style scoped>


.inputBox {
    margin-top: 12px;
}

.bui-box:after, .bui-box:before {
    content: "";
    display: table;
}

.avatar-wrap {
    float: left;
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    overflow: hidden;
}

.avatar-wrap img {
    width: 100%;
    height: 100%;
}

.avatar-wrap-center {
    margin-top: 7px;
}

.input-wrap{
	position: relative;
    font-size: 16px;
    color: #bababa;
    border: 1px solid #3f404c;
    background: #fff;
    margin-left: 42px;
    height: 44px;
    box-sizing: content-box;
    transition: all .4s;
}

.c-textarea{
	background: #fff;
    padding: 11px 16px 0;
}

.c-textarea textarea {
    display: block;
    font-size: 16px;
    width: 100%;
    height: 30px;
    resize: none;
    border: 0;
    outline: 0;
    padding: 0;
    transition: all .4s;
}

.inputBox .c-action{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0;
    border: none;
    height: 44px;
}

.inputBox .c-action .c-submit {
    float: right;
    line-height: 44px;
    background-color: #3f404c;
    width: 110px;
    height: 100%;
    color: #fff;
    text-align: center;
    cursor: pointer;
}


.input-wrap.focus{
    height: 100%;
}
.input-wrap.focus .c-textarea textarea{
    height: 110px;
}

.input-wrap.focus .c-action{
    position: relative;
    background-color: #f4f5f6;
}
</style>